<template>
  <view class="containter">
    <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
      <block slot="top">
        <view class="headerBg"></view>
        <uv-navbar title="接单大厅" titleStyle="color:#fff" bgColor="transparent" placeholder>
          <template v-slot:left>
            <image @click="toSearchPage" style="width: 48rpx;height: 48rpx;" src="../../static/images/search.png"
              mode=""></image>
          </template>
        </uv-navbar>
        <view class="tabs">
          <view class="tab-item flex flex-center align-center" @click="setIndex(index)"
            :class="currentIndex == index?'active':''" v-for="(item, index) in tabsList" :key="index">
            {{ item.name }}
            <uv-badge v-if="index == 0" numberType="overflow" type="error" max="99" :value="count">
            </uv-badge>
          </view>
        </view>
        <view v-if="no_dispatch_prompt.length>0"
          style="position: relative;z-index: 0;padding: 20rpx 20rpx 0 20rpx;box-sizing: border-box;">
          <image style="width: 100%;height: 578rpx;" src="../../static/images/homeBg.png" mode=""></image>
          <view class="notice">
            <view class="notice-item" v-for="(item, index) in no_dispatch_prompt" :key="index">
              {{item}}
            </view>
          </view>
        </view>
      </block>
      <view class="warpper">
        <List :dataList="dataList" @init="init" @acceptOrder="handleAcceptOrder"></List>
      </view>
      <view slot="bottom">
        <view class="shipei"></view>
      </view>
    </z-paging>
    <uv-modal ref="modal" title="确认接单吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
    <Tabbar :selectedIndex="0"></Tabbar>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        tabsList: [{
            name: "待接单"
          },
          {
            name: "已接单"
          }
        ],
        currentIndex: 0,
        params: {
          is_follow: 0,
          page: 1,
          limit: 10,
          keyword: ""
        },
        dataList: [],
        count: 0,
        no_dispatch_prompt: [],
        oId: "",
        mp_template_id: "" //消息模板id
      }
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.reload();
      })
      this.getUserInfo();
    },
    onLoad() {
      this.getConfig();
    },
    methods: {
      getConfig(){
        reqApi.config({}).then(res=>{
          console.log("系统参数", res);
          this.mp_template_id = res.data.mp_template_id;
        })
      },
      // 子组件接单
      handleAcceptOrder(id) {
        console.log("子组件传过来的id", id);
        // this.oId = id;
        // this.$refs.modal.open();
        reqApi.takeOrder({
          id
        }).then(res => {
          uni.showToast({
            title: "接单成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          let _this = this;
          uni.requestSubscribeMessage({
            tmplIds: [_this.mp_template_id],
            success(res) {
              console.log("是否授权", res);
              if (res[_this.mp_template_id] == "accept") { // 用户点击确定后
                _this.$refs.paging.reload();
              }
              if (res[_this.mp_template_id] == "reject") { // 用户点击确定后
                uni.showToast({
                  title: "拒绝订阅消息",
                  icon: 'none',
                  mask: true,
                  duration: 1000,
                })
              }
            }
          })
        })
      },
      confirm() {
        console.log('点击确认按钮');
        reqApi.takeOrder({
          id: this.oId
        }).then(res => {
          uni.showToast({
            title: "接单成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          let _this = this;
          uni.requestSubscribeMessage({
            tmplIds: [_this.mp_template_id],
            success(res) {
              console.log("是否授权", res);
              if (res[_this.mp_template_id] == "accept") { // 用户点击确定后
                _this.$refs.paging.reload();
              }
              if (res[_this.mp_template_id] == "reject") { // 用户点击确定后
                uni.showToast({
                  title: "拒绝订阅消息",
                  icon: 'none',
                  mask: true,
                  duration: 1000,
                })
              }
            }
          })
        })
      },
      getUserInfo() {
        reqApi.getUserInfo({}).then(res => {
          console.log("获取用户信息", res);
          let userInfo = res.data;
          uni.setStorageSync("userInfo", userInfo);
          this.no_dispatch_prompt = userInfo.no_dispatch_prompt;
        })
      },
      init() {
        this.$refs.paging.reload();
      },
      // 派单大厅列表
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.getList(this.params).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
          this.count = res.data.wait_count;
        })
      },
      toSearchPage() {
        uni.navigateTo({
          url: "/pages/home/search?type=2"
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.params.is_follow = index;
        this.dataList = [];
        this.$refs.paging.reload();
      },
      toSearchPage() {
        uni.navigateTo({
          url: "/pages/home/search?type=2"
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .notice {
    position: absolute;
    bottom: 60rpx;
    width: 710rpx;

    .notice-item {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #FF3B30;
      text-align: center;
    }
  }

  .shipei {
    width: 100%;
    height: 100rpx;
    padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
  }

  .active {
    font-weight: bold;
  }

  .active::after {
    position: absolute;
    content: " ";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46rpx;
    height: 6rpx;
    background: #FFFFFF;
    border-radius: 110rpx;
  }

  .containter {
    position: relative;

    .headerBg {
      width: 750rpx;
      height: 704rpx;
      background: linear-gradient(to top, rgba(16, 113, 231, 0) 0%, #1071E7 100%);
      position: absolute;
      top: 0;
      left: 0;
    }

    .tabs {
      display: flex;

      .tab-item {
        flex: 1;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        height: 88rpx;
      }
    }

    .warpper {
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      z-index: 100;

    }
  }
</style>